<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Metro-UI Test</title>
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="js/dropdown.js"></script>
	<link href="css/modern.css" rel="stylesheet">
	<link href="css/modern-responsive.css" rel="stylesheet">
</head>
<body class="metrouicss">
	<div class="page">
		<div class="nav-bar">
			<div class="nav-bar-inner">
				<span class="pull-menu"></span>
				<span class="element">Главная страница</span>
				<span class="divider"></span>
				<ul class="menu">
					<li data-role="dropdown">
						<a href="#">Документацiя</a>
						<ul class="dropdown-menu">
							<li><a href="#">Вікно прийому платжів</a></li>
							<li><a href="#">Єдине вікно переказів</a></li>
						</ul>
					</li>
					<li><a href="#">БПК</a></li>
					<li><a href="#">Тарифи</a></li>
					<li><a href="#">Валюта</a></li>
					<li><a href="#">Компенсація</a></li>
					<li><a href="#">Гаряча лінія</a></li>
					<li data-role="dropdown"><a href="#">Перерва</a></li>
				</ul>
			</div>
		</div>
	</div>


	<div class="page secondary with-sidebar">

		<div class="page-header" style="height:70px">
            <div class="page-header-content">
                <a href="/" class="back-button page-back" style="top:24px;"></a>
                <h2 style="top:24px;left:65px">Документація</h2>
            </div>
        </div>

		<div class="page-sidebar">
			<ul>
				<li><a href="#">Єдине вікно переказів</a>
					<ul class="sub-menu">
						<li><a href="#">Unistream+</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">Western Union</a></li>
						<li><a href="#">Intel Express</a></li>
						<li><a href="#">InterExpress</a></li>
						<li><a href="#">Xazri</a></li>
						<li><a href="#">Ria</a></li>
						<li><a href="#">Лидер</a></li>
						<li><a href="#">MoneyGram</a></li>
						<li><a href="#">Blizko</a></li>
						<li><a href="#">Coinstar</a></li>
						<li><a href="#">XpressMoney</a></li>
						<li><a href="#">Migom</a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div class="page-region" style="padding:10px">
			<table class="hovered bordered">
				<thead>
					<tr>
						<td>1st</td><td>2nd</td><td>3d</td><td>4th</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1st</td><td>2nd</td><td>3d</td><td>4th</td>
					</tr>
					<tr>
						<td>1st</td><td>2nd</td><td>3d</td><td>4th</td>
					</tr>
					<tr>
						<td>1st</td><td>2nd</td><td>3d</td><td>4th</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>